<template>
  <div>
    <Header title="歌手介绍"><i class="el-icon-arrow-left" @click="$global.goPage('/ArtistIndex')"></i></Header>
    <div class="Artist_detail">
<img class="ArtistBanner_img" :src="ArtistDetail.cover"/>
      <el-tabs v-model="activeName" @tab-click="" stretch>
        <el-tab-pane label="简介" name="1">
          <el-card>
            <h1>歌手名：{{ArtistDetail.name}}</h1>
            <h2 v-if="ArtistDetail.rank.type===1">华语榜排名：{{ArtistDetail.rank.rank}}</h2>
            <h2 v-if="ArtistDetail.rank.type===2">欧美榜排名：{{ArtistDetail.rank.rank}}</h2>
            <h2 v-if="ArtistDetail.rank.type===4">日本榜排名：{{ArtistDetail.rank.rank}}</h2>
            <h2 v-if="ArtistDetail.rank.type===3">韩国榜排名：{{ArtistDetail.rank.rank}}</h2>
            <h2>歌曲数：{{ArtistDetail.musicSize}}</h2>
            <h2>专辑数：{{ArtistDetail.albumSize}}</h2>
            <h2>mv数：{{ArtistDetail.mvSize}}</h2>
            <h2>歌手简介：{{ArtistDetail.briefDesc}}</h2>
          </el-card>
          <el-card v-for="(item,i) in ArtistDesc" :key="i">
            <h1>{{item.ti}}</h1>
            <h2>{{item.txt}}</h2>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="歌曲" name="2">

          <div class="List-content">
            <div class="content-top"><h1><img class="music_icon" src="@/assets/music.svg">热门歌曲（50）</h1></div>
          <songs-list :songsList="ArtistSongs"></songs-list>
          </div>

        </el-tab-pane>
        <el-tab-pane label="专辑" name="3">
<el-card v-for="(item,i) in ArtistAlbum" class="album_card" :key="i">
  <img class="album_img" :src="item.picUrl"/>
  <div>
    <h1>{{item.name}}</h1>
    <p class="gray_span">歌曲数：{{item.size}}</p>
    <p class="gray_span">制作公司：{{item.company}}</p>
    <p class="gray_span">类型：{{item.subType}} / {{item.type}}</p>
    <p class="gray_span">发布时间：{{$global.dateToDay(item.publishTime)}}</p>
  </div>
</el-card>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import Header from "../../../components/Header";
import {mapState} from "vuex";
import SongsList from "./SongsList";
export default {
name: "artistDetail",
  components: {SongsList, Header},
  data(){
  return{
activeName:'1'
  }
  },
  computed:{
    ...mapState({
      ArtistDetail:state=>state.music.ArtistDetail,
      ArtistDesc:state=>state.music.ArtistDesc,
      ArtistSongs:state=>state.music.ArtistSongs,
      ArtistAlbum:state=>state.music.ArtistAlbum

    })
  },
  beforeCreate() {
    this.$store.dispatch('music/ArtistDetailById',this.$route.params.id)
    this.$store.dispatch('music/ArtistDescById',this.$route.params.id)
    this.$store.dispatch('music/ArtistAlbum',this.$route.params.id)
    this.$store.dispatch('music/ArtistSongs',this.$route.params.id)
},
}
</script>

<style lang="less" scoped>
.Artist_detail{
  width: 100%;
  .ArtistBanner_img{
    width: 100%;
    height: 400px;
  }
  .List-content {
    i {
      font-size: 30px;
      margin: 0 10px;
    }
    .content-top {
      background: #eae7e7;
      padding: 10px 20px;
      h1 {
        font-size: 24px;
        display: flex;
      }
    }
  }
  .album_card /deep/ .el-card__body{
    display: flex;
    align-items: center;
    .album_img{
      width: 80px;
      height: 80px;
      border-radius: 30px;
      margin-right: 20px;
    }
    .gray_span{
      font-size: 22px;
      line-height: 30px;
      color: gray;
    }
  }

  /deep/ .el-tabs__item{
    font-size: 24px;
    line-height: 50px;
    height: auto;
  }
  .el-card{
    width: 80%;
margin-top: 20px;
    h1{
      font-size: 30px;
      line-height: 60px;
    }
    h2{
      font-size: 25px;
      line-height: 50px;
    }

  }
}
</style>
